<template>
  <!-- <div class="videoPosition1" v-if="isShow">1</div>
  <div class="videoPosition2" v-if="isShow">2</div>
  <div class="videoPosition3" v-if="isShow">3</div>
  <div class="videoPosition4" v-if="isShow">4</div> -->
  <template v-if="isShow">
    <div v-for="item in videos" :key="item.id" :class="[item.class, videoIndex === item.id ? 'bVideo' : 'sVideo']" @click="showBigVideo(item.id)">{{ item.text }}</div>
  </template>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, inject } from 'vue'
import { useUserStore } from '@/store/user';
const userStore = useUserStore()
defineOptions({ name: 'video-component' });

const isShow = computed(() => {
  return userStore.$state.showVideo
})
const videoIndex = ref(0)
const videos = [{
  id: 1,
  text: 'VIDEO 1',
  url: '',
  class: 'videoPosition1'
}, {
  id: 2,
  text: 'VIDEO 2',
  url: '',
  class: 'videoPosition2'
}, {
  id: 3,
  text: 'VIDEO 3',
  url: '',
  class: 'videoPosition3'
}, {
  id: 4,
  text: 'VIDEO 4',
  url: '',
  class: 'videoPosition4'
}]

// 点击对应视频区域放大该区域
const showBigVideo = (videoId) => {
  if (videoIndex.value !== videoId) {
    videoIndex.value = videoId
  } else {
    videoIndex.value = 0
  }
}

</script>

<style lang="less" scoped>
.sVideo{
  width: 250px;
  height: 172px;
}
.bVideo{
  width: 415px;
  height: 286px;
}
.videoPosition1{
  position: absolute;
  left: calc(100% - 950px);
  top: 250px;
  border: 1px solid #707070;
  background-color: #888888;
}
.videoPosition2{
  position: absolute;
  right: calc(100% - 950px);
  top: 250px;
  border: 1px solid #707070;
  background-color: #888888;
}
.videoPosition3{
  position: absolute;
  right: calc(100% - 950px);
  bottom: 80px;
  border: 1px solid #707070;
  background-color: #888888;
}
.videoPosition4{
  position: absolute;
  left: calc(100% - 950px);
  bottom: 80px;
  border: 1px solid #707070;
  background-color: #888888;
}
</style>